<template>
    <div class="book-carousel-div">
        <el-row type="flex" justify="center">
            <el-col :span="16">
                <el-carousel :interval="3000" type="card" height="16.67vw"
                             ref="bookCarousel" @change="(pre, next) => {change(pre, next)}"
                             :arrow="'never'" >
                    <el-carousel-item v-for="(book, key) in bookList" :key="key">
                        <!--<h3 class="medium">{{ item }}</h3>-->
                        <el-row class="title-row" type="flex" justify="center">
                            <el-col :span="20">
                                <p class="book-title" v-if="key === nowIndex">{{book.title}}</p>
                                <p class="book-content" v-if="key === nowIndex">{{book.content}}</p>
                            </el-col>
                        </el-row>
                        <el-row class="img-row" type="flex" justify="center">
                            <el-col :span="10">
                                <el-image class="book-img" :src="book.url"></el-image>
                            </el-col>
                        </el-row>
                    </el-carousel-item>
                </el-carousel>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "BookCarousel",
        data() {
            return {
                msg: '这是book轮播图控件',
                nowIndex: 0,
                bookList: [
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51sDzGa%2BpfL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "醉步男",
                        content: "世界科幻文学至高代表作，日本狂销23年，终于引进正版！同时收录恐怖小说名篇《玩具修理者》"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/71k2fG9T4FL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "人性的枷锁",
                        content: "“故事圣手”“天才小说家”毛姆长篇代表作，一本解答人生奥义的希望之书"
                    },
                    {
                        url: "https://images-na.ssl-images-amazon.com/images/I/51uU6L%2BrfpL.__BG0,0,0,0_FMpng_AC_UL240_SR240,240_.jpg",
                        title: "怒",
                        content: "日本重量级芥川奖作家吉田修一，《恶人》之后又一新作，比《白夜行》更凄美，比《告白》更深刻，照见都市人无处遁形的孤独"
                    }
                ]
            }
        },
        methods: {
            change(pre, next) {
                //console.log(pre + '-------' + next);
                this.nowIndex = pre;
            }
        },
        mounted() {
        }

    }
</script>

<style scoped>
    .el-col {
        /*height: 360px;*/
    }

    .el-carousel .title-row .el-col {
        height: 80px;
    }

    .el-carousel .img-row .el-col {
        height: 240px;
    }

    .el-carousel {
        margin-top: 10px;
    }

    .book-img {
        height: 240px;
        margin-left: 13px
    }

    .book-carousel-div {
        height: 360px;
        background: url("../../assets/book-cas-bg.jpg");
        background-size: cover;
    }
    .book-title {
        opacity: 0.75;
        font-size: 25px;
        line-height: 31px;
        text-align: center;
        font-weight: bolder;
        margin: 0;
    }

    .book-content {
        color: #475669;
        font-size: 14px;
        opacity: 0.50;
        line-height: 24px;
        padding: 0;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        /*background-color: #99a9bf;*/
    }

    .el-carousel__item:nth-child(2n+1) {
        /*background-color: #d3dce6;*/
    }

</style>